<template>
  <view class="comment-item-container">
    <!-- 评论项 -->
    <view class="comment-item">
      <!-- 顶层评论 -->
      <view class="root-comment-container">
        <!-- 信息面板 -->
        <view class="comment-info-panel">
          <!-- 头像 -->
          <view class="root-comment-avatar">
            <image style="width: 80rpx;height: 80rpx;" :src="commentItem.avatar" mode="aspectFill"></image>
          </view>
          <!-- 信息 -->
          <view class="root-comment-info">
            <view class="name">
              {{commentItem.user}}
            </view>
            <view class="time">
              {{commentItem.time}}
            </view>
          </view>
          <!-- 点赞 -->
          <view class="like-box">
            <view class="like-icon iconfont">
              {{commentItem.is_favor ? '' : '&#xe610;'}}
            </view>
            <view class="like-num">
              {{commentItem.favor_num}}
            </view>
          </view>
        </view>
        <!-- 评论内容 -->
        <view class="root-comment-content">
          <text>{{commentItem.text}}</text>
        </view>
      </view>
      <!-- 评论回复 -->
      <view class="sub-comment-container">
        <view class="sub-comment-list">
          <!-- 楼中楼项 -->
          <view class="sub-comment-item" v-for="subCommentItem in commentItem.subCommentList" :key="subCommentItem.id">
            <!-- 面板 -->
            <view class="sub-comment-panel">
              <view class="sub-comment-avatar">
                <image style="width: 60rpx;height: 60rpx;" :src="subCommentItem.avatar" mode="aspectFill"></image>
              </view>
              <view class="sub-comment-info">
                <view class="name">
                  {{subCommentItem.user}}
                </view>
                <view class="time">
                  {{subCommentItem.time}}
                </view>
              </view>
              <view class="like-box">
                <view class="like-icon iconfont">
                  {{subCommentItem.is_favor ? '' : '&#xe610;'}}
                </view>
                <view class="like-num">
                  {{subCommentItem.favor_num}}
                </view>
              </view>
            </view>
            <!-- 内容 -->
            <view class="sub-comment-content">
              <text>{{subCommentItem.text}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "comment-item",
    props: {
      commentItem: {
        type: Object,
        default: {},
      }
    },
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .comment-item-container {
    .comment-item {
      margin-top: 20rpx;

      .root-comment-container {
        position: relative;
        padding-left: 100rpx;

        .comment-info-panel {
          display: flex;
          justify-content: space-between;

          .root-comment-avatar {
            position: absolute;
            top: 0;
            left: 0;
          }

          .root-comment-info,
          .like-box {
            height: 80rpx;
            display: flex;
            justify-content: space-between;
          }

          .root-comment-info {
            flex-direction: column;

            .time {
              font-size: 20rpx;
              color: #0191FF;
            }
          }

          .like-box {
            align-items: flex-end;

            .like-icon {
              margin-right: 10rpx;
              color: #000000;
              line-height: 24rpx;
            }

            .like-num {
              line-height: 24rpx;
            }
          }
        }

        .root-comment-content {
          margin-top: 8rpx;
        }
      }

      .sub-comment-container {
        padding-left: 100rpx;

        .sub-comment-item {
          position: relative;
          margin-top: 10rpx;
          padding-left: 70rpx;

          .sub-comment-panel {
            display: flex;
            justify-content: space-between;

            .sub-comment-avatar {
              position: absolute;
              top: 0;
              left: 0;
            }

            .sub-comment-info,
            .like-box {
              height: 60rpx;
              display: flex;
              justify-content: space-between;
            }

            .sub-comment-info {
              flex-direction: column;

              .name {
                font-size: 22rpx;
              }

              .time {
                font-size: 18rpx;
                color: #0191FF;
              }
            }

            .like-box {
              align-items: flex-end;
              color: #000000;
              font-size: 22rpx;
              line-height: 22rpx;

              .like-icon {
                margin-right: 10rpx;
              }

              .like-num {}
            }
          }

          .sub-comment-content {
            margin-top: 10rpx;
            font-size: 22rpx;

            .sub-comment-reply {
              display: inline-block;

              .reply-name {
                margin: 0 6rpx;
                color: #00000080;
              }
            }
          }
        }
      }
    }
  }
</style>